<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <div></div>
    <ul>
        <li></li>
    </ul>
    <script>
         /* 
            传统的注册事件的方法，只能绑定一个事件。赋值会进行重新覆盖。
            第二种注册事件的方法，可以添加多个事件。
        */
        var buttons = document.querySelectorAll('button');
        buttons[0].onclick = function () {
            console.log('你好啊');
        }
        buttons[0].onclick = function () {
            console.log('下雪了');
        }
        // 注册事件的第二种方式
        buttons[1].addEventListener('click', function () {
            console.log('冬天来了');
        });
        buttons[1].addEventListener('click', function () {
            console.log('元旦来了');
        });

        buttons[2].attachEvent('onclick', function () {
            console.log('ie9 attachEvent');
        });

        // 知识回顾
        //  1. 获取元素
        document.getElementById('qq');
        document.getElementsByTagName('li');
        var div = document.querySelector('div');
        var ul = document.querySelector('ul');
        var li = document.querySelector('li');
        var button = document.querySelector('button');
        document.querySelectorAll('li');
        // 2. 填充元素的内容
        div.innerHTML = '';
        div.innerText = '';
        // 3. 新增
        var li1 = document.createElement('li');
        // document.appendChild(li1);
        // document.insertBefore(li, li1);
        // 4. 删除节点
        ul.removeChild(ul.children[0]);
        // 5. 元素属性进行操作
        div.name = 'zhangsan'
        button.disabled = false;
        // 6. 父子兄的操作。
        // 7. 自定义属性
        // div.getAttribute();
        // div.setAttribute();
        // data- 做前缀
        // 8. 事件
    </script>
</body>
</html>